<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="linzeliang.top"/>
    <meta name="robots" content="all"/>
    <title>留言板</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/message.css}"/>
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a class="header-logo" id="logo">linzeliang</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a th:href="@{/index.html}">首页</a></li>
                        <li><a th:href="@{/article.html}">博客</a></li>
                        <li><a th:href="@{/message.html}">留言</a></li>
                        <li><a th:href="@{/link.html}">友链</a></li>
                    </ul>
                </nav>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
            <div class="container-inner">
                <section class="msg-remark">
                    <h1>留言板</h1>
                    <p>
                        沟通交流，拉近你我~
                    </p>
                </section>
                <div class="textarea-wrap message" id="textarea-wrap">
                    <form class="layui-form blog-editor" action="">
                        <div class="layui-form-item">
                            <input type="text" name="username" class="layui-input" placeholder="请输入昵称"
                                   lay-verify="username">
                        </div>
                        <div class="layui-form-item">
                            <textarea name="editorContent" lay-verify="content" id="remarkEditor" placeholder="请输入内容"
                                      class="layui-textarea layui-hide"></textarea>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交留言
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="f-cb"></div>
            <div class="mt20">
                <ul class="message-list" id="message-list">
                    <li class="zoomIn article" th:each="messageList : ${messageLists}">
                        <div class="comment-parent">
                            <a name="remark-1"></a>
                            <img src="https://thirdqq.qlogo.cn/qqapp/101465933/7627F745B95BFAC18C6C481FE72B4EB1/100"/>
                            <div class="info">
                                <span class="username" th:text="${messageList.username}" style="font-size: 16px"></span>
                            </div>
                            <div class="comment-content" th:utext="${messageList.content}"></div>
                            <p class="info info-footer">
                                <span class="comment-time"
                                      th:text="${#dates.format(messageList.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                <a href="javascript:;" class="btn-reply"
                                   th:attr="data-targetname=${messageList.username},data-targetid=${messageList.id},data-baseid=${messageList.id}">回复</a>
                            </p>
                        </div>
                        <div th:each="child : ${messageList.childMessage}" class="comment-child"
                             style="border-top: 1px solid #e6e6e6; margin-top: 10px; padding-top: 10px;">
                            <a name="reply-1"></a>
                            <img src="https://thirdqq.qlogo.cn/qqapp/101465933/7627F745B95BFAC18C6C481FE72B4EB1/100"/>
                            <div class="info">
                                <span class="username" style="font-size: 16px;"
                                      th:text="${child.username}"></span>
                                <span style="padding-right:0;margin-left:-5px;">回复</span>
                                <span class="username" th:text="${child.parentUsername}"></span>:
                                <span th:utext="${child.content}"></span>
                            </div>
                            <p class="info">
                                <span class="comment-time"
                                      th:text="${#dates.format(child.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                <a href="javascript:;" class="btn-reply"
                                   th:attr="data-targetname=${child.username},data-targetid=${child.id},data-baseid=${messageList.id}">回复</a>
                            </p>
                        </div>
                        <div class="replycontainer layui-hide">
                            <form class="layui-form" action="">
                                <input type="hidden" name="targetId" id="targetId">
                                <input type="hidden" name="baseId" id="baseId">
                                <div class="layui-form-item">
                                    <input type="text" name="username" class="layui-input" placeholder="请输入昵称"
                                           lay-verify="username">
                                </div>
                                <div class="layui-form-item">
                                    <textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容"
                                              class="layui-textarea" style="min-height:80px;"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-xs" lay-submit="formReply"
                                            lay-filter="formReply">提交
                                    </button>
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a th:href="@{https://github.com/linzeliang1222}"><i class="fa fa-github"></i></a>
                        <a title="523543574"><i class="fa fa-qq"></i></a>
                        <a title="linzeliang1222@gmail.com"><i class="fa fa-envelope"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2021 By linzeliang
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/yss/gloable.js}"></script>
    <script th:src="@{/js/plugins/nprogress.js}"></script>
    <script th:src="@{/js/message.js}"></script>
    <script>NProgress.start();</script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
    </script>
</body>
</html>
